前幾天已經陸續認識了製作此網站可能會需要的工具。
在開始真正製作網站之前,我覺得還需要先想清楚一件事:
如果沒有先規劃好網站的功能和操作流程,之後開始寫程式時,很容易做到一半才發現功能還沒想清楚。
所以今天先把整個網站的基本流程規劃出來。
目前預計的操作流程是:
首頁(之後再考慮做登入)
↓
輸入店家
↓
確認店家(可能會有同名或是分店)
↓
開始分析
↓
分析中
↓
避雷報告
接下來就把每一個步驟拆開來看。
使用者進入網站後,首先看到的是「AI 避雷探針」。
首頁會簡單介紹這個網站可以做什麼,讓使用者知道:
輸入一家店,就可以透過 AI 分析店家評論,快速整理出可能需要注意的地方。
首頁也會放置店家輸入欄位,讓使用者可以直接開始查詢。
使用者輸入想查詢的店家名稱。
例如:
某某拉麵店
希望可以搭配 Google Maps / Places API,找到使用者輸入的店家,並取得相關的店家資料。
目前先把這個功能當成之後要完成的目標。
避免搜尋結果中有多間名稱相似的店家或是分店的狀況,可以先讓使用者確認要分析的是哪一家。
確認店家後,再按下「開始分析」。
網站接著會開始取得需要的資料,再交給 Gemini 進行分析。
預計流程會是:
使用者輸入店家
↓
Google Maps / Places API
↓
取得店家相關資料與評論
↓
Gemini 分析評論
因為 AI 分析需要一些時間,所以不希望使用者按下按鈕後,畫面完全沒有變化。
因此想設計一個「分析中」的狀態。
例如顯示:
正在分析評論中,請稍候……
讓使用者知道網站目前正在處理資料,而不是沒有反應。
分析完成後,最後會顯示「避雷報告」。
目前預計會整理成幾個主要項目,例如:
把今天的規劃整理起來,目前可以想成:
首頁
↓
輸入店家
↓
Google Maps / Places API
↓
取得店家評論
↓
Gemini 分析
↓
整理成 JSON
↓
顯示避雷報告
這樣前幾天認識的技術也開始慢慢串在一起。
今天沒有急著開始寫程式,而是先把「AI 避雷探針」的使用流程大概規劃出來。
我發現做網站不只是把功能寫出來而已,在開始開發之前,也需要先思考:
使用者會怎麼操作?
網站需要哪些功能?
資料會經過哪些步驟?
先把這些流程想清楚,之後開始實作時應該會比較有方向,不會漏東漏西。